<template>
  <div class="ticket-flower-main">
    <div class="node-block">
      <div class="node-block-item">
        <div class="icon icon1"></div>
        <div class="name">已提交的节点</div>
      </div>
      <div class="node-block-item">
        <div class="icon icon2"></div>
        <div class="name">已退回的节点</div>
      </div>
      <div class="node-block-item">
        <div class="icon icon3"></div>
        <div class="name">未完成的节点</div>
      </div>
    </div>
    <div class="notice">
      <el-icon color="rgba(89, 143, 247, 1)" size="20"><InfoFilled /></el-icon>
      <span class="content">业务审核流程完成后，进入工单处理流程。</span>
    </div>
    <div class="min-title">
      <div class="icon"></div>
      <div class="name">业务审核流程</div>
    </div>
    <div class="m1">
      <Progress
        :height="'430px'"
        :width="'80%'"
        :save="saveXml"
        :xml-str="workflowData.review_content"
        :show-type="'REVIEW'"
        :data="workflowData.review"
      ></Progress>
    </div>
    <div class="min-title">
      <div class="icon"></div>
      <div class="name">工单处理流程</div>
    </div>
    <div class="m1">
      <Progress
        :height="'430px'"
        :width="'80%'"
        :save="saveXml"
        :xml-str="workflowData.operate_content"
        :show-type="'OPERATE'"
        :data="workflowData.operate"
      ></Progress>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref, reactive } from "vue";
import Progress from "@/components/Process/index.vue";
import { getWorkflowDetailApi } from "@/api/modules/ticket/pending";
const props = defineProps({
  flowId: {
    type: Number,
    require: true
  }
});
let workflowData = reactive<any>({
  operate_content: undefined,
  review_content: undefined,
  review: [],
  operate: []
});
const getWorkflowDetail = async () => {
  let { data } = await getWorkflowDetailApi(props.flowId);
  workflowData = Object.assign(workflowData, data);
  console.log(workflowData);
};
let saveXml = ref<boolean>(false);
watch(
  () => props.flowId,
  () => getWorkflowDetail(),
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
@import "common";
.ticket-flower-main {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  height: 100%;
  .node-block {
    display: flex;
    column-gap: 32px;
    padding: 16px;
    color: var(--el-text-color-primary);
    .node-block-item {
      display: flex;
      column-gap: 8px;
      align-items: center;
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 2px;
      }
      .icon1 {
        background: rgb(174 231 255 / 100%);
      }
      .icon2 {
        background: rgb(255 232 232 / 100%);
      }
      .icon3 {
        box-sizing: border-box;
        background: rgb(255 255 255 / 100%);
        border: 1px solid var(--el-header-menu-text-color);
      }
    }
  }
  .notice {
    display: flex;
    column-gap: 8px;
    align-items: end;
    padding: 16px;
    margin-bottom: 24px;
    background: rgb(240 245 255 / 100%);
    border: 1px solid rgb(89 143 247 / 100%);
    border-radius: 2px;
    .content {
      font-size: 16px;
      color: var(--el-text-color-primary);
    }
  }
  .m1 {
    min-height: 300px;
  }
}
</style>
